<style lang="scss" scoped>
  @import '../../styles/common/loading.less';
  .container{
    border: none !important;
    margin-top: 4px;
  }
  .el-col-offset-1 {
    margin-left: 0%;
  }
  .button_a {
    background-color: rgba(255, 138, 0, 1);
    border-color: rgba(255, 138, 0, 1);

  }
  .col_a {
    margin-left: 2%;
  }
  .el-card {
    height: 200px;
  }

  .el-button--primary {
    background-color: rgba(255, 138, 0, 1);
    border-color: rgba(255, 138, 0, 1);
  }
</style>
<template>
    <!-- 调查处理列表页面 -->
    <div>
        <div class="container">
          <el-form :model="formInline" ref="formInline" class="select-submit-form">
              <!--                        第一行-->
              <el-row type="flex">
                  <el-col :span="8" >
                      <el-form-item prop="caseNo" label="大病赔案号">
                          <el-input  v-model="formInline.caseNo"></el-input>
                      </el-form-item>
                  </el-col>
                  <el-col :span="8" >
                      <el-form-item prop="insuredName" label="被保险人">
                          <el-input  v-model="formInline.insuredName"></el-input>
                      </el-form-item>
                  </el-col>
                  <el-col :span="8" >
                      <el-form-item prop="documentNo" label="证件号">
                          <el-input  v-model="formInline.documentNo"></el-input>
                      </el-form-item>
                  </el-col>

              </el-row>
              <el-row type="flex">
              <el-col :span="8" >
                <el-form-item prop="taskState" label="任务状态">
                  <el-select  v-model="formInline.taskState">
                      <el-option label="请选择" value="09"></el-option>
                      <el-option label="待处理" value="01"></el-option>
                      <el-option label="已处理" value="03"></el-option>
                      <el-option label="已退回" value="04"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div class="select-btn-group">
                  <el-button type="primary" size="medium"  @click="handleSearch">查询</el-button>
                  <el-button type="primary" size="medium" @click="handleReset('formInline')">重置</el-button>
                </div>
              </el-col>
            </el-row>
          </el-form>
          <el-table
            :data="tableData"
            class="table"
            ref="multipleTable"
            header-cell-class-name="table-header"
            style="margin: 30px 0;border: 1px solid #d6d9d8;"
            v-loading="loading"
            element-loading-text="Loading....."
          >
            <el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
            <el-table-column label="大病赔案号" width="165" align="center">
              <template slot-scope="scope" >
                    <a href="#" style="color: #409EFF" @click="toTaskDetailPage(scope.row)">{{scope.row.caseNo}}</a>
                  <!-- <router-link  v-if="(scope.row.taskState=='01' || scope.row.taskState=='04')"
                  :to="{
                      name: 'surveyTaskListDetail', 
                      params: { 
                          taskId: scope.row.taskId,
                          taskState: scope.row.taskState,
                          policyNo: scope.row.policyNo,
                          insuredName: scope.row.insuredName,
                          socialSecurityNo: scope.row.socialSecurityNo,
                          documentTypeName: scope.row.documentTypeName,
                          documentNo: scope.row.documentNo,
                          comCode: scope.row.comCode
                      }
                  }">
                      <a href="#" style="color: #409EFF" >{{scope.row.caseNo}}</a>
                  </router-link>
                  <router-link  v-if="scope.row.taskState=='03'"
                  :to="{
                      name: 'surveyTaskListDetailSee', 
                      params: { 
                          taskId: scope.row.taskId,
                          taskState: scope.row.taskState,
                          policyNo: scope.row.policyNo,
                          insuredName: scope.row.insuredName,
                          socialSecurityNo: scope.row.socialSecurityNo,
                          documentTypeName: scope.row.documentTypeName,
                          documentNo: scope.row.documentNo,
                          comCode: scope.row.comCode
                      }
                  }">
                      <a href="#" style="color: #409EFF" >{{scope.row.caseNo}}</a>
                  </router-link> -->
              </template>
            </el-table-column>
            <el-table-column prop="policyNo" label="保单号" width="165" align="center"></el-table-column>
            <el-table-column prop="insuredName" label="被保险人" align="center"></el-table-column>
            <el-table-column prop="socialSecurityNo" label="社/医保号" align="center"></el-table-column>
            <el-table-column prop="documentNo" label="证件号" align="center" width="188px"></el-table-column>
            <el-table-column prop="surveyReason" :formatter="formatSurveyReason" label="调查原因" align="center"></el-table-column>
            <el-table-column prop="damageDate" label="出险时间" width="150" align="center"></el-table-column>
            <el-table-column prop="flowInTime" label="流入时间" width="150" align="center"></el-table-column>
            <el-table-column prop="handleComrName" label="处理人机构" width="150" align="center"></el-table-column>
            <el-table-column prop="handlerName" label="处理人" align="center"></el-table-column>
            <el-table-column prop="taskState" :formatter="formatTaskState" label="任务状态" align="center"></el-table-column>
          </el-table>
          <div class="pagination">
              <div v-show=" pagination.totalPage>0" class="index_page">
                  <el-pagination :current-page="pagination.currentPage" :page-size="pagination.rowsNumber"
                                :page-sizes="[10, 25, 50, 100, 500, 1000, 5000]"
                                :total="pagination.totalPage" background layout="prev, pager, next,sizes,total,jumper"
                                @size-change="handleSizeChange" @current-change="queryFun">
                  </el-pagination>
              </div>
          </div>
        </div>
    </div>
</template>

<script>
import {queryProcessEngineList,taskCheck} from '@/api/baseDate'
import Cookies from "js-cookie";
export default {
    name: 'surveyTaskList',
    data() {
        return {
            loading: false,
            pagination: {
              currentPage: 1, // 当前页
              rowsNumber: 10, // 每页条数
              totalPage: 0 // 总条数
            },
            formInline:{},
            tableData: [],
            item:0,
            researchTaskDetail:{},
        };
    },
    created() {
        this.querySurveyTaskList();
    },
    methods: {
        // 改变当前页条数事件
        handleSizeChange(pageSize){ 
            this.pagination.rowsNumber=pageSize
            this.querySurveyTaskList();
        },
        // 改变当前页事件
        queryFun(pageNum){ 
            this.pagination.currentPage=pageNum
            this.querySurveyTaskList();
        },
        // 查询
        handleSearch(){
            this.querySurveyTaskList();
        },
        // 重置
        handleReset(formName){
            this.$refs[formName].resetFields();
        },
        // 查询列表
        querySurveyTaskList() {
            var data = {
                ...this.formInline,
                taskType:'survey',
                pageNum: this.pagination.currentPage,
                pageSize: this.pagination.rowsNumber,
                comCode: Cookies.get("makeCom"),
                handleComrCode: Cookies.get("makeCom"),
                handlerCode: Cookies.get("userCode"),
                comCode:Cookies.get("makeCom")
            }
            // 禁止重复点击
            if(this.loading){
                return;
            }
            this.loading = true;
            queryProcessEngineList(data)
                .then(res => {
                    this.loading = false;
                    if(res){
                        if(res.data.resultCode != '0000'){
                            this.$message.error(res.data.resultMsg);
                        }else{
                            this.tableData = res.data.list;
                            this.pagination.totalPage=res.data.total;
                        }
                    }else{
                        this.$message.error('系统异常');
                    }
                })
        },
        // 跳转详情页面
        toTaskDetailPage(row){
            if(row.taskState === '01' || row.taskState === '04'){
                this.checkTask(row, 'surveyTaskListDetail');
            }else{
                this.toDetailPage(row,'surveyTaskListDetailSee');
            }
        },
         // 跳转详情
        toDetailPage(row, pathName){
            const datas = {
                taskId: row.taskId,
                taskState: row.taskState,
                policyNo: row.policyNo,
                insuredName: row.insuredName,
                socialSecurityNo: row.socialSecurityNo,
                documentTypeName: row.documentTypeName,
                documentNo: row.documentNo,
                comCode: row.comCode
            };
            this.$router.push({
                name: pathName, 
                params: datas
            });
        },
        // 占位校验
        checkTask(row, pathName){
            let checkDatas = {
                processId: row.processId,
                handleComrCode: Cookies.get("makeCom"),
                handleComrName: Cookies.get("cMakeCom"),      
                handlerCode: Cookies.get("userCode"),
                handlerName: Cookies.get("userName"),
                reqFlag: "check"
            }
            taskCheck(checkDatas).then(res => {
                if(res){
                    if(res.data.resultCode != '0000'){
                         this.$alert(res.data.resultMsg,'提示', {
                            confirmButtonText: '确定'
                        });
                    }else{
                        this.toDetailPage(row, pathName);
                    }
                }else{
                    this.$message.error('系统异常');
                }
            })
        }
    }
}
</script>